import { defineConfig } from "vite";
import postcssPresetEnv from "postcss-preset-env";
import path from "path";
import { ViteAliases } from "./node_modules/vite-aliases";
import MyViteAliases from "./plugins/ViteAliases";
// import { createHtmlPlugin } from "vite-plugin-html";
import CreateHtmlPlugin from "./plugins/CreateHtmlPlugin";
// import { viteMockServe } from "vite-plugin-mock";
import viteMockServe from "./plugins/VitePluginMock";
import viteCompression from "vite-plugin-compression";

export default defineConfig({
  optimizeDeps: {
    exclude: [], // 将指定数组中的依赖不进行依赖预构建
  },
  envPrefix: "ENV_",
  css: {
    // 对css的行为进行配置
    modules: {
      // 对css模块化的默认行为进行覆盖
      localsConvention: "camelCaseOnly",
      scopeBehaviour: "local", // 配置当前的  模块化行为是模块化还是全局化（有hash就是开启模块化的一个标志，因为他可以保证产生不同的hash值来控制我们的样式类名不被覆盖）
      // generateScopedName: "[name]_[local]_[hash:5]",
      // generateScopedName: (name, filename, css) => {
      //   // name: 代表的是你此刻css文件中的类名
      //   // filename：当前css文件的绝对路径
      //   // css：给的就是你当前样式
      //   console.log(name, filename, c ss);
      //   return `${name}_${Math.random().toString(36).substring(3, 8)}`;
      // },
      hashPrefix: "hello", // 生成hash会根据你的类名 + 一些其他的字符串（文件名+其他内部随机生成一个字符串）去进行生成，如果你想要生成hash更加独特一点
      globalModulePaths: ["./componentB.module.css"], // 代表你不想参与到css模块化的路径
    },
    preprocessorOptions: {
      // key+ config key代表预处理器的名
      less: {
        // 整个配置对象都会最终给到less的执行参数（全局参数）中去
        // 在webpack里就给less-loader去配置就好了
        math: "always",
        globalVars: {
          mainColor: "red",
        },
      },
      sass: {},
    },
    devSourcemap: true,
    // vite的诞生一定会让postcss再火一次
    // postcss: {
    //   plugins: [postcssPresetEnv()],
    // },
  },
  build: {
    // 配置rollup的一些构建策略
    rollupOptions: {
      // 控制输出
      output: {
        assetFileNames: "[hash].[name].[ext]", // 在rollup里面，hash代表将你的文件名喝文件内容进行组合计算得来的结果
      },
    },
    assetsInlineLimit: 4096, //4kb 控制静态资源如果小于该值则打包成base64格式
    outDir: "dist",
    assetsDir: "assets",
  },
  plugins: [
    MyViteAliases(),
    // ViteAliases({
    //   prefix: "@",
    // }),
    // createHtmlPlugin({
    //   inject: {
    //     data: {
    //       title: "hello vite",
    //     },
    //   },
    // }),
    CreateHtmlPlugin({
      inject: {
        data: {
          title: "主页",
        },
      },
    }),
    viteMockServe(),
    viteCompression(),
  ],
});
